<template>
	<view class="h_100">
		<!-- 全部 -->
		<view v-if="wholeList.length<=0" class="d-flex flex-column w-100 a-center j-center h_100">
			<image src="/static/images/order/icon_no_data.png" mode="" class="icon_no_data"></image>
			<view class="">暂无任何订单</view>
		</view>
		<view class="" v-else>
			<view class="m-2 bg-white rounded-20" @click="order_detail(item)" v-for="(item,index) in wholeList" :key="index">
				<view class="today_title px-3 py-2 rounded-top">
					<view class="d-flex j-sb pt">
						<view class="d-flex a-center">
							<view class="mr-1 rounded-50 d-flex user_img j-center a-center">
								<u-icon name="account-fill" color="#ff6b69" size="30"></u-icon>
							</view>
							<view class="">{{item.mobile}}</view>
						</view>
						<view class="d-flex a-center"><image v-if="item.is_grab" src="/static/images/order/appoint.png" class="appoint mr" mode=""></image>{{item.label_order_status}}</view>
					</view>
					<view class="d-flex j-sb text-light-muted">
						<view class="">{{item.create_time}}</view>
						<view class="">{{item.order_sn}}</view>
					</view>
				</view>
				<view class="p-3">
					<view class="d-flex">
						<view class="d-flex j-center a-center" v-if="item.goods_items.length>1">
							<view  class="d-flex mr-1" v-for="(imgItem,imgIndex) in item.goods_items" :key="index">
								<image class="today_hot rounded-20" :src="imgItem.img.url?imgItem.img.url:defaltImage" mode=""></image>
							</view>
							<view class="mr-2" v-if="item.goods_items.length>3">
								<u-icon name="more-dot-fill" color="#eaeaea" size="50"></u-icon>
							</view>
						</view>
						<view class="d-flex" v-else>
							<view class="mr-1">
								<image class="today_hot rounded-20" :src="item.goods_items[0].img.url" mode=""></image>
							</view>
							<view class="mx-2 my-1">
								<view class="ellipsis">{{item.goods_items[0].name}}</view>
								<view class="text-light-muted">属性：500g</view>
							</view>
						</view>
					</view>
					<view class="py-1">
						<text>共{{item.goods_number}}件</text><text>合计:{{item.formated_total_fee}}</text>
					</view>
					<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待付款'">
						<view class="" @click="order_payment(item)">付款</view>
						<view class="" @click="order_mouse(item)">改价</view>
						<view class="" @click="close_shop(item)">关闭</view>
					</view>
					<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待收货' || item.label_order_status=='已完成'">
						<view class="py-1 px-3 border rounded-50" @click="take_flow(item)">查看物流</view>
						<view class="py-1 px-3 border ml-2 rounded-50" @click="takeroud(item)">备注</view>
					</view>
					<view class="d-flex order_card_content_footer j-end font-md" v-if="item.label_order_status=='待发货'">
						<view class="py-1 px-3 border rounded-50" @click.stop="today_shipments(item)">发货</view>
						<view class="py-1 px-3 border ml-2 rounded-50" @click.stop="close_shop(item)">关闭</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		props:["wholeList"],
		data(){
			return {
				defaltImage:'../../../static/images/goods/icon_default_image.png',
			}
		},
		computed:{
			...mapState({
				token:state=>state.user.token,
			})
		},
		methods:{
			// 详情
			order_detail(item){
				this.$emit("order_detail",item)
			},
			// 备注 操作记录
			takeroud(item){
				this.$emit("order_record",item)
			},
			// 物流信息
			take_flow(item){
				this.$emit("order_flow",item)
			},
			// 发货
			today_shipments(item){
				this.$emit("today_shipments",item)
			},
			// 关闭订单
			close_shop(item){
				this.$emit("close_shop",item)
			},
			// 付款
			order_payment(item){
				uni.navigateTo({
					url:"/pages/order-confirm/order-confirm?order_id="+item.order_id
				})
			},
			// 改价
			order_mouse(item){
				uni.navigateTo({
					url:"/pages/order-mouse/order-mouse?order_id="+item.order_id
				})
			},
		},
		onLoad() {
			
		}
	}
</script>

<style>
	.order_img{
		width: 130upx;
		height: 130upx;
		border-radius: 50%;
	}
	.order_card{
		border-radius: 50upx;
	}
	.order_card_head{
		background-color: #e8f0f3;
		border-radius: 20upx 20upx 0 0;
	}
	.order_card_head_img{
		width: 45upx;
		height: 30upx;
	}
	.order_card_content{
		border-radius: 0 0 20upx 20upx;	
	}
	.order_card_content image{
		width: 150upx;
		height: 150upx;
	}
	
	.order_card_content_footer view{
		border: 1px solid #999999;
		padding:8upx 30upx;
		margin-right: 10upx;
		border-radius: 30upx;
	}
</style>
